<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE-CodeMaster - 在线编程刷题平台</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 其他头部内容（如标题、CSS 引入） -->
    <!-- 指定 favicon 路径 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        success: '#52C41A',
                        danger: '#FF4D4F'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
        }
    </style>

    <style>
        /* 全局样式 */
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #F7F8FA;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .input-focus-effect {
            position: relative;
        }

        .input-focus-effect::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #165DFF;
            transition: width 0.3s ease;
        }

        .input-focus-effect:focus-within::after {
            width: 100%;
        }

        /* 密码可见性切换动画 */
        .toggle-icon {
            transition: transform 0.3s ease;
        }

        .toggle-icon.active {
            transform: rotate(180deg);
        }

        /* 加载动画 */
        .loader {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* 错误提示 */
        .error-message {
            transform: translateY(-10px);
            opacity: 0;
            transition: all 0.3s ease;
        }

        .error-message.show {
            transform: translateY(0);
            opacity: 1;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
    <!-- 登录容器 -->
    <div class="w-full max-w-6xl grid md:grid-cols-2 gap-8 shadow-2xl rounded-2xl overflow-hidden bg-white">
        <!-- 左侧品牌展示区 -->
        <div class="hidden md:flex flex-col justify-between bg-gradient-primary p-12 text-white relative overflow-hidden">
            <!-- 背景装饰 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-10 left-10 w-40 h-40 rounded-full bg-white"></div>
                <div class="absolute bottom-20 right-10 w-60 h-60 rounded-full bg-white"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full bg-white"></div>
            </div>

            <!-- 品牌信息 -->
            <div class="relative z-10 animate-fade-in" style="animation-delay: 0.1s">
                <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-shadow">SSE-CodeMaster</h1>
                <p class="text-lg opacity-90 max-w-md">提升你的编程技能，挑战来自全球的编程题目，成为真正的代码大师。</p>
            </div>

            <!-- 功能特点 -->
            <div class="relative z-10 space-y-6 mt-12 animate-fade-in" style="animation-delay: 0.3s">
                <div class="flex items-start gap-4">
                    <div class="bg-white/20 p-3 rounded-lg">
                        <i class="fa fa-code text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">海量题库</h3>
                        <p class="opacity-80">超过10,000道编程题目，覆盖各种难度和知识点</p>
                    </div>
                </div>

                <div class="flex items-start gap-4">
                    <div class="bg-white/20 p-3 rounded-lg">
                        <i class="fa fa-trophy text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">竞技模式</h3>
                        <p class="opacity-80">参与编程竞赛，与全院同窗友好竞技</p>
                    </div>
                </div>

                <div class="flex items-start gap-4">
                    <div class="bg-white/20 p-3 rounded-lg">
                        <i class="fa fa-line-chart text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-1">进度追踪</h3>
                        <p class="opacity-80">实时跟踪学习进度，智能推荐适合的练习题目</p>
                    </div>
                </div>
            </div>

            <!-- 底部信息 -->
            <div class="relative z-10 mt-12 animate-fade-in" style="animation-delay: 0.5s">
                <p class="text-sm opacity-80">全程参与，全程匿名，全程免费</p>
                <div class="flex items-center mt-4 space-x-2">
                    <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                    <img src="https://picsum.photos/id/1002/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                    <img src="https://picsum.photos/id/1003/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                    <img src="https://picsum.photos/id/1004/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                </div>
            </div>
        </div>

        <!-- 右侧登录表单区 -->
        <div class="flex flex-col p-8 md:p-12 animate-fade-in">
            <!-- 移动端品牌信息 -->
            <div class="md:hidden mb-8">
                <h1 class="text-3xl font-bold text-dark mb-2">SSE-CodeMaster</h1>
                <p class="text-gray-500">提升编程技能，挑战全球题目</p>
            </div>

            <!-- 登录标题 -->
            <div class="mb-8">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark">欢迎回来</h2>
                <p class="text-gray-500 mt-1">请登录你的账号继续学习</p>
            </div>

            <!-- 错误提示 -->
            <div id="errorMessage" class="error-message bg-danger/10 border border-danger/20 text-danger text-sm p-3 rounded-lg mb-4">
                <i class="fa fa-exclamation-circle mr-2"></i>
                <span id="errorText">登录失败，请检查用户名和密码</span>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-6 flex-grow">
                <!-- 用户名/邮箱输入 -->
                <div class="space-y-2 input-focus-effect">
                    <label for="username" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input
                            type="text"
                            id="username"
                            name="username"
                            required
                            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请输入邮箱"
                        >
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="space-y-2 input-focus-effect">
                    <div class="flex justify-between">
                        <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                        <a href="#" class="text-sm text-primary hover:text-primary/80 transition-custom">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input
                            type="password"
                            id="password"
                            name="password"
                            required
                            class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-custom"
                            placeholder="请输入密码"
                        >
                        <button
                            type="button"
                            id="togglePassword"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-custom"
                        >
                            <i class="fa fa-eye toggle-icon"></i>
                        </button>
                    </div>
                </div>

                <!-- 记住密码 -->
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <input
                            type="checkbox"
                            id="remember"
                            name="remember"
                            class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary/50"
                        >
                        <label for="remember" class="ml-2 block text-sm text-gray-700">记住我</label>
                    </div>
                </div>

                <!-- 登录按钮 -->
                <button
                    type="submit"
                    id="loginButton"
                    class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-custom flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:shadow-primary/30 transform hover:-translate-y-0.5 active:translate-y-0"
                >
                    <span id="loginText">登录</span>
                    <i class="fa fa-arrow-right" id="loginArrow"></i>
                    <div class="loader" id="loginLoader" style="display: none;"></div>
                </button>

            <!-- 注册提示 -->
            <div class="mt-8 text-center">
                <p class="text-gray-600">
                    还没有账号?
                    <a href="/register" class="font-medium text-primary hover:text-primary/80 transition-custom">立即注册</a>
                </p>
            </div>

            <!-- 底部条款 -->
            <div class="mt-6 text-center text-xs text-gray-500">
                <p>登录即表示您同意我们的<a href="#" class="hover:text-primary">服务条款</a>和<a href="#" class="hover:text-primary">隐私政策</a></p>
            </div>
          </form>
        </div>
    </div>

    <!-- 交互脚本 -->
    <script>
        // 密码可见性切换
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        const eyeIcon = togglePassword.querySelector('i');

        togglePassword.addEventListener('click', () => {
            // 切换密码可见性
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);

            // 切换图标
            eyeIcon.classList.toggle('fa-eye');
            eyeIcon.classList.toggle('fa-eye-slash');
            eyeIcon.classList.toggle('active');
        });

        // 表单提交处理
        const loginForm = document.getElementById('loginForm');
        const loginButton = document.getElementById('loginButton');
        const loginText = document.getElementById('loginText');
        const loginArrow = document.getElementById('loginArrow');
        const loginLoader = document.getElementById('loginLoader');
        const errorMessage = document.getElementById('errorMessage');
        const errorText = document.getElementById('errorText');

        // 显示错误信息
        function showError(message) {
            errorText.textContent = message;
            errorMessage.classList.add('show');

            // 5秒后自动隐藏错误信息
            setTimeout(() => {
                errorMessage.classList.remove('show');
            }, 5000);
        }

        // 隐藏错误信息
        function hideError() {
            errorMessage.classList.remove('show');
        }

        // 显示加载状态
        function showLoading() {
            loginButton.disabled = true;
            loginText.style.display = 'none';
            loginArrow.style.display = 'none';
            loginLoader.style.display = 'block';
        }

        // 隐藏加载状态
        function hideLoading() {
            loginButton.disabled = false;
            loginText.style.display = 'inline';
            loginArrow.style.display = 'inline';
            loginLoader.style.display = 'none';
        }

        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            hideError();

            // 获取表单数据
            const email = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value;
            const remember = document.getElementById('remember').checked;

            // 简单验证
            if (!email) {
                showError('请输入邮箱');
                return;
            }

            if (!password) {
                showError('请输入密码');
                return;
            }

            try {
                // 显示加载状态
                showLoading();

                // 调用登录API
                const response = await fetch('/api/v1/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email,
                        password,
                        remember
                    }),
                    credentials: 'include' // 允许跨域请求携带cookie
                });

                const result = await response.json();

                // 隐藏加载状态
                hideLoading();
                console.log(result.code)

                // 处理API响应
                if (result.code === 200) {
                    // 登录成功，存储token或其他信息
                    if (result.token) {
                        localStorage.setItem('token', result.token);
                    }

                    // 跳转到首页或之前的页面
                    window.location.href = '/'; // 根据实际情况修改跳转路径
                } else {
                    // 登录失败，显示错误信息
                    alert("登录失败")
                    showError(result.message || '登录失败，请检查用户名和密码');
                }
            } catch (error) {
                // 隐藏加载状态
                hideLoading();

                // 处理网络错误
                console.error('登录请求失败:', error);
                showError('网络错误，请稍后重试');
            }
        });

        // 添加输入框动画效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('scale-[1.01]');
                input.parentElement.style.transition = 'transform 0.2s ease';
            });

            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('scale-[1.01]');
            });

            // 输入时隐藏错误信息
            input.addEventListener('input', hideError);
        });
    </script>
</body>
</html>
